<template>
    <div>
      
      <div class="minegoodman" >
          <router-link to="/minepage/mine"><img style="margin-left:4%;margin-top:5%;float:left" src="/src/assets/微信图片_20220829174837.png"/></router-link>
         <img style="float:right;margin-right:4%;margin-top:4%;" src="/src/assets/微信图片_20220830155605.png"/>
          
    </div>
    <div class="minibottom-1">
      <img src="/src/assets/微信图片_20220829115305.jpg"/>
      <div class="minibottom-1-1">
        <span class="span1">DaiSy</span><div class="Lv">Lv2</div>
       <p><span class="span2">做更美的自己。</span></p>
      </div>
      <button style="color:#ffffff;background-color:#ec7b67;border:0px;float:right;width:70px;height:30px;border-radius: 5px;font-size:12px;margin-top:13%;margin-right:2%">+ 关注</button>
    </div>
    <div style="width:100%;float:left;display:flex;justify-content: space-around;margin-top:12%;"> 
      <router-link to="/minegoodman/goodmanfollow">
      <div style="text-align: center;">
       
        <span style="font-size:16px;color:#4c4c4c"><b>108</b></span>
        <p><span style="font-size:12px;color:#4c4c4c">关注</span></p>
        
      </div>
      </router-link>
      <div style="text-align: center;">
        <span style="font-size:16px;color:#4c4c4c"><b>560</b></span>
        <p><span style="font-size:12px;color:#4c4c4c">粉丝</span></p>
      </div>
      <div style="text-align: center;">
        <span style="font-size:16px"><b>908</b></span>
        <p><span style="font-size:12px">赞与收藏</span></p>
      </div>
    </div>
    <div style="width:100%;float:left;display:flex;justify-content: space-around;border-top: 1px solid #f2f2f2;margin-top:5%">
        <div style="height:50px;line-height:50px;font-weight: bold;color:#ed816e" @click="span1(1)" class="span9">
          帖子 (10)
        </div>
        <div style="height:50px;line-height:50px" @click="span1(2)" class="span9">
          日记 (8)
        </div>
    </div>
       <div style="display: flex;justify-content: space-around; flex-flow: wrap;float:left" v-show='tiezi' @click="span1(2)">
            <div class="tiezi1" style="text-align: center;">
                <img class="img1" src="/src/assets/微信图片_20220902144149.jpg" />
                <p><span style="font-size:18px">眼综合+全脸脂肪填充前后对比</span></p>
                <p><img style="float:left;margin-top:2%" src="/src/assets/微信图片_20220902144433.png"/><span style="font-size:12px;float:left;margin-left:3%;margin-top:2%">Daisy</span><span style="color:#b5b5b5;font-size:12px;float:right;margin-right:2%;">330</span><img style="margin-right:4%;margin-top:2%;float:right;vertical-align: middle" src="/src/assets/微信图片_20220902144813.png"/></p>
            </div>
            <div class="tiezi2" style="text-align: center;">
                <img class="img2" src="/src/assets/微信图片_20220902144152.jpg" />
                <p><span style="font-size:18px">眼综合+全脸脂肪填充前后对比</span></p>
                <p><img style="float:left;margin-top:2%" src="/src/assets/微信图片_20220902144433.png"/><span style="font-size:12px;float:left;margin-left:3%;margin-top:2%">Daisy</span><span style="color:#b5b5b5;font-size:12px;float:right;margin-right:2%;">330</span><img style="margin-right:4%;margin-top:2%;float:right;vertical-align: middle" src="/src/assets/微信图片_20220902144813.png"/></p>
            </div>
            <div class="tiezi1" style="text-align: center;">
                <img class="img1" src="/src/assets/微信图片_20220902144155.jpg" />
                <p><span style="font-size:18px">眼综合+全脸脂肪填充前后对比</span></p>
                <p><img style="float:left;margin-top:2%" src="/src/assets/微信图片_20220902144433.png"/><span style="font-size:12px;float:left;margin-left:3%;margin-top:2%">Daisy</span><span style="color:#b5b5b5;font-size:12px;float:right;margin-right:2%;">330</span><img style="margin-right:4%;margin-top:2%;float:right;vertical-align: middle" src="/src/assets/微信图片_20220902144813.png"/></p>
            </div>
            <div class="tiezi1" style="text-align: center;">
                <img class="img1" src="/src/assets/微信图片_20220902144157.jpg" />
                <p><span style="font-size:18px">眼综合+全脸脂肪填充前后对比</span></p>
                <p><img style="float:left;margin-top:2%" src="/src/assets/微信图片_20220902144433.png"/><span style="font-size:12px;float:left;margin-left:3%;margin-top:2%">Daisy</span><span style="color:#b5b5b5;font-size:12px;float:right;margin-right:2%;">330</span><img style="margin-right:4%;margin-top:2%;float:right;vertical-align: middle" src="/src/assets/微信图片_20220902144813.png"/></p>
            </div>
            <div class="tiezi1" style="text-align: center;">
                <img class="img3" src="/src/assets/微信图片_20220902144200.png" />
                <p><span style="font-size:18px">眼综合+全脸脂肪填充前后对比</span></p>
                <p><img style="float:left;margin-top:2%" src="/src/assets/微信图片_20220902144433.png"/><span style="font-size:12px;float:left;margin-left:3%;margin-top:2%">Daisy</span><span style="color:#b5b5b5;font-size:12px;float:right;margin-right:2%;">330</span><img style="margin-right:4%;margin-top:2%;float:right;vertical-align: middle" src="/src/assets/微信图片_20220902144813.png"/></p>
            </div>
            <div class="tiezi1" style="text-align: center;">
                <img class="img1" src="/src/assets/微信图片_20220902144203.jpg" />
                <p><span style="font-size:18px">眼综合+全脸脂肪填充前后对比</span></p>
                <p><img style="float:left;margin-top:2%" src="/src/assets/微信图片_20220902144433.png"/><span style="font-size:12px;float:left;margin-left:3%;margin-top:2%">Daisy</span><span style="color:#b5b5b5;font-size:12px;float:right;margin-right:2%;">330</span><img style="margin-right:4%;margin-top:2%;float:right;vertical-align: middle" src="/src/assets/微信图片_20220902144813.png"/></p>
            </div>
          </div>
           <div v-show="riji" style="width:100%;background-color:#ffffff;float:left;">
            <div style="width:100%;float:left;" v-for="item in arr" :key="item">
                <div style="float:left;width:100%"><img style="float:left;width:50px;height:50px;margin-left:2%;" src="/src/assets/微信图片_20220902163052.jpg"/><div  style="height:100%;float:left;margin-left:2%"><span>Daisy</span><p><span style="font-size:10px;color:#d4d4d4;">2020/10/09 12:09:09</span></p></div><button style="width:80px;height:30px;border:0px;background-color:#fdf2f0;color:#f3afa2;float:right;margin-right: 2%;margin-top:3%">已关注</button></div>
                  <div style="float:left;width:100%;display: flex;justify-content: space-around; flex-flow: wrap;margin-top:2%">
                    <div style="height:110px;width:160px;background-color:#fdf2f0;float:left;text-align:center">
                      <img style="margin-top:20%;margin-left:-25%" src="/src/assets/微信图片_20220830164027.png"/>
                      <div style="color:#FFFFFF;float:left;background-color:#82b3cb;border-radius: 0px 20px 20px 0px;width:48px;height:24px;margin-top:54%">术前</div>
                    </div>
                     <div style="height:110px;width:160px;background-color:#fdf2f0;float:left;text-align:center">
                       <img style="margin-top:20%;margin-left:-25%" src="/src/assets/微信图片_20220830164027.png"/>
                       <div style="color:#FFFFFF;float:left;background-color:#82b3cb;border-radius: 0px 20px 20px 0px;width:48px;height:24px;margin-top:54%">术后</div>
                     </div>
                    </div>
                    <div style="float:left;width:90%;margin-left:5%">
                      <span>眼综合+全脸脂肪填充后10个月前后对比，做完手术也有10个月左右了，今天和大家分…</span>
                    </div>
                    <div style="float:left;width:90%;margin-left:5%;height:50px;margin-top:5%">
                   <span style="color:#b5b5b5;font-size:12px;float:right;margin-right:10%;margin-top:1%;">30</span><img style="margin-right:4%;margin-top:2%;float:right;vertical-align: middle" src="/src/assets/微信图片_20220902173750.png"/> <span style="color:#b5b5b5;font-size:12px;float:right;margin-right:10%;margin-top:1%;">330</span><img style="margin-right:4%;margin-top:2%;float:right;vertical-align: middle" src="/src/assets/微信图片_20220902144813.png"/>
                    </div>
            </div>
               
          </div>
       
    </div>
    
  

</template>

<script>
export default {
  data() {
    return {
      tiezi:true,
      riji:false,
      arr:[
        {'src1':''},
        {'src1':''},
        {'src1':'/src/assets/微信图片_20220902143946.jpg'},
        {'src1':'/src/assets/微信图片_20220902144157.jpg'},
        {'src1':'/src/assets/'},
        {'src1':'/src/assets/微信图片_20220902144203.jpg'}
      ], 
    }
    
  },
  methods: {
      span1(index){
        let span=document.querySelectorAll('.span9')
        if(index==1){
            this.tiezi=true;
            this.riji=false,
            span[0].style.fontWeight="bold";
            span[0].style.color="#ed816e";
            span[1].style.fontWeight=""
            span[1].style.color=""
        }
        if(index==2){
            this.tiezi=false;
             this.riji=true,
            span[1].style.fontWeight="bold"
            span[1].style.color="#ed816e"
            span[0].style.fontWeight=""
            span[0].style.color=""
        }
     }
    }
}
</script>

<style>
  .tiezi1{width: 186px;background-color: #ffffff;margin-top: 4%;}
  .tiezi2{width: 186px;background-color: #ffffff;margin-top: 4%;height: 267px;}
  .tiezi2{width: 186px;background-color: #ffffff;margin-top: 4%;}
  .img2{width: 186px; height: 148px;}
  .img1{width: 186px; height: 251px;}
  .img3{width: 191px; height: 187px;}
 .minegoodman{width: 100%;height:50px;float: left;text-align: center;position:flex;}
 .minibottom-1{width: 100%; background-color: #ffffff;float: left; }
.minibottom-1 img{width: 60px; height: 60px;margin-top: 8%;margin-left: 5%;float: left;}
.minibottom-1-1{float: left;margin-left:5%;margin-top: 10%;width: 100px;}
.span1{font-size: 20px;font-weight: bold;float: left;}
.span2{font-size:10px;color: #999999;float: left;}
.Lv{width: 35px; color: #ffffff;background-color:#ec7b67;font-size: 10px;text-align: center;border-radius: 30px;float: right;margin-top:-25% ;margin-left: 25%;}
</style>